<template>
  <view class="my-number">
    <title-bar>
      <view class="title">我的组号</view>
    </title-bar>
    <view class="card-list">
      <scroll-view scroll-y="true" class="scroll-h">
        <my-number-card
          v-for="(item, index) in numberList"
          :key="index"
          :index="index"
          :numbers="item.numbers"
          :counts="item.counts"
          :rules="item.rules"
          @delete="handleDeleteThisNumber"
          @edit="handleEditThisNumber"
        ></my-number-card>
        <view
          class="empty-container flex justify-center align-center"
          v-if="numberList.length === 0"
        >
          <view class="empty">
            <image mode="widthFix" src="../../static/empty.png" />
          </view>
          <view class="label">
            您暂时没有组号
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import TitleBar from '@/components/title-bar/title-bar.vue'
import MyNumberCard from '@/components/my-number-card/card.vue'

export default {
  components: {
    TitleBar,
    MyNumberCard,
  },
  data() {
    return {
      numberList: [],
    }
  },
  methods: {
    onCateChange(e) {},
    handleDeleteThisNumber(index) {
      let numbers = uni.getStorageSync('numbers')
        ? JSON.parse(uni.getStorageSync('numbers'))
        : []

      if (numbers.length > 0 && typeof index === 'number') {
        numbers.splice(index, 1)
        uni.setStorageSync('numbers', JSON.stringify(numbers))
        this.numberList = numbers
      }
    },
    handleEditThisNumber(index) {
      if (typeof index === 'number') {
        uni.setStorageSync('from', 'mine')
        uni.setStorageSync('numbersIndex', index)
        uni.switchTab({
          url: '/pages/number/index',
        })
      }
    },
  },
  onLoad(option) {
    let numbers = uni.getStorageSync('numbers')
      ? JSON.parse(uni.getStorageSync('numbers'))
      : []

    this.numberList = numbers
  },
}
</script>

<style lang="scss" scoped>
.my-number {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  .title {
    font-size: 32upx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    text-align: center;
  }
  .card-list {
    .scroll-h {
      height: calc(100vh - var(--status-bar-height) - 88upx);
      /* #ifdef H5 */
      height: calc(100vh - var(--window-top) - 88upx);
      /* #endif */
      padding-bottom: 28upx;
      .empty-container {
        height: 100%;
        background-color: #ffffff;
        flex-direction: column;
        .empty {
          width: 250upx;
          height: 230upx;
        }
        .label {
          text-align: center;
          font-size: 28upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #71808a;
          line-height: 40upx;
        }
      }
    }
  }
}
</style>
